<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/common/taglibs.jsp"%>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
   	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
	<title>菜单管理</title>
    <link href="<%=request.getContextPath()%>/css/bootstrap.css" rel="stylesheet" type="text/css">
    <script src="<%=request.getContextPath()%>/js/jquery-2.0.3.min.js" type="text/javascript"></script>
    <script src="<%=request.getContextPath()%>/js/bootstrap.js" type="text/javascript"></script>  
    
        
    <link rel="stylesheet" href="<%=request.getContextPath()%>/css/bootstrapValidator.css"/>
    <script type="text/javascript" src="<%=request.getContextPath()%>/js/bootstrapValidator.js"></script>

    <link href="<%=request.getContextPath()%>/js/uploadify/default.css" rel="stylesheet" type="text/css" />
    <link href="<%=request.getContextPath()%>/js/uploadify/uploadify.css" rel="stylesheet" type="text/css" />
	<script type="text/javascript" src="<%=request.getContextPath()%>/js/uploadify/swfobject.js"></script>
	<script type="text/javascript" src="<%=request.getContextPath()%>/js/uploadify/jquery.uploadify.v2.1.0.js"></script>

    <script type="text/javascript">
    var fileSize = 10;// 上传限制-单位M
    $(document).ready(function() {
    	$("#defaultForm")
        .bootstrapValidator({
            message: 'This value is not valid',
            fields: {
                "t.name": {
                    validators: {
                        notEmpty: {
                            message: '图片名称不能为空'
                        },
                        remote: {
                        	//需要判断品牌名不重复 ajax验证：json的返回数据必须是{"valid",true or false} false代表已存在 
                            url: '<%=request.getContextPath()%>/productPic/ProductPic_nameExist.action',
                            message: '图片名已存在',
                            dataType: "json", 
                            type: 'POST'
                        }
                    }
                }
            }
        });
    	
        
    	/* 上传商品详细图片 */
    	$("#productPic").uploadify({
    		'uploader' : '<%=request.getContextPath()%>/js/uploadify/uploadify.swf',
    		'script' : '<%=request.getContextPath()%>/productPic/ProductPic_upload',//后台处理的请求  
    		'cancelImg' : '<%=request.getContextPath()%>/js/uploadify/uploadify-cancel.png',
    		'folder' : 'upload',                                                  //您想将文件保存到的路径  
    		'fileDataName'   : 'uploadify',                                          //和input的name属性值保持一致就好，Struts2就能处理了
    		'queueID' : 'productPic',                                                //与下面的id对应  
    		'method'         :'GET',                                                 //如果要传参数，就必须改为GET 
    		'queueSizeLimit' : 6,                                                    //上传6张
    		'fileDesc' : '*.jpg,*.png,*.gif,*.JPEG,*.PNG,*.GIF',
    		'fileExt' : '*.jpg;*.gif;*.jpeg;*.png;*.bmp',                            //控制可上传文件的扩展名，启用本项时需同时声明fileDesc  
    		'auto' : true,                                                           //自动上传
    		'multi' : true,
    		'simUploadLimit' : 1,                                                    //上传个数
    		'buttonText' : '浏览',
    	    //'buttonImg'      :'${ctx}/images/browse2.png',
    	    'displayData'    : 'speed',                                              //有speed和percentage两种，一个显示速度，一个显示完成百分比 
    	    'scriptData'     : {'type':'product'},
    	    onOpen: function(event, queueID, fileObj) {
    	       	 if(fileObj.size==0){
    	                alert("文件 " +fileObj.name +"内容为空取消其上传！");
    	                $("#productPic").uploadifyCancel(queueID);
             	 }
    	       	 if(fileObj.size / 1024 / 1024 > fileSize){
    	                alert("文件 " +fileObj.name +"内容大于"+fileSize+"M,取消其上传！");
    	                $("#productPic").uploadifyCancel(queueID); 
    	         }
    	       	 if(fileObj.type != '.jpg' &&fileObj.type != '.png' &&fileObj.type != '.gif' 
    	       			 &&fileObj.type != '.JPEG' &&fileObj.type != '.PNG' && fileObj.type != '.GIF'){
    	       		 alert("请您选择jpg、png、gif、JPEG、PNG、GIF格式的文件！");
    	       		 $("#productPic").uploadifyCancel(queueID); 
           		 }

    	    },
    		onComplete : function(event,queueID, fileObj, response,data) {
    			$("#path").val(response);
    			$("#path").siblings("img").attr("src",response);
    			$("#pathmng").attr("style","color:black");
    			$("#msg").text("");
    		}
    	});
        
    });
    

    function checkPath(){
    	var path=$("#path").val();
    	path=path.trim();
    	var bootstrapValidator =$("#defaultForm").data('bootstrapValidator');
    	bootstrapValidator.validate();
    	if(bootstrapValidator.isValid() && path !="" && path!=null){
    	    document.getElementById("defaultForm").action="productPic/ProductPic_save.action?page="+${page};
    		document.getElementById("defaultForm").submit();
    	}else{
    		$("#pathmng").attr("style","color:#a94442");
    		$("#msg").text("商品图片不能为空");
    	}
    }
    </script>
</head>
<body>
<div class="panel panel-primary">
  <div class="panel-heading">商品图片管理</div>
  <div class="panel-body">
    
	  <form id="defaultForm" class="form-horizontal" action="" method="post">
	  
    	  <div class="form-group">
		    <label for="t.name" class="col-sm-offset-3 col-sm-2 control-label">商品图片名称：</label>
		    <div class="col-sm-2">
		        <input class="form-control" type="text" name="t.name" id="text" placeholder="请输入商品图片名称" style="width: 300px" value="${t.name}">
		    </div>
		  </div>
         <c:if test="${empty method}" >
		 <div class="form-group">
		    <label class="col-sm-offset-3 col-sm-2 control-label" id="pathmng">请选择图片：</label>
		    <div class="col-sm-3">
		             <c:set var="defaultImage">
          				<c:choose>
          				    <c:when test="${product.imgUrl == null || product.imgUrl == '' }">
          						
          					</c:when>
          					<c:otherwise>
          						${product.imgUrl }
          					</c:otherwise>
          				</c:choose>
          			</c:set>
		        <img src="${defaultImage}" style="padding:2px; border:1px solid; margin-bottom:10px;width:200px;height:200px; "/>
		        <input type="file" name="productPic" id="productPic">
		        <input type="hidden" name="t.path" id="path" value="${product.path }"/>
		        <div id="msg" style="color:#a94442;"></div>
		    </div>
		  </div>
          </c:if>
  
	      <c:if test="${!empty method}" >
	          <input name="method" type="hidden" value="${method }">
			  <input type="hidden" name="t.id" value="${t.id}">
			  <input type="hidden" name="t.creationTime" value="${t.creationTime}">
			  <input type="hidden" name="t.creator" value="${t.creator}">
			  
			  
			  <div class="form-group">
		    <label for="" class="col-sm-offset-3 col-sm-2 control-label">请选择图片：</label>
		    <div class="col-sm-3">
		             <c:set var="defaultImage">
          				<c:choose>
          					<c:when test="${product.imgUrl == null || product.imgUrl == '' }">
          						${t.path }
          					</c:when>
          					<c:otherwise>
          						${product.imgUrl }
          					</c:otherwise>
          				</c:choose>
          			</c:set>
		        <img src="${defaultImage}" style="padding:2px; border:1px solid; margin-bottom:10px;width:200px;height:200px; "/>
		        <input type="file" name="productPic" id="productPic">
		        <c:if test="${empty product.imgUrl}">
		            <input type="hidden" name="t.path" id="path" value="${t.path }"/>
		        </c:if>
		        
		        <c:if test="${!empty product.imgUrl}">
		            <input type="hidden" name="t.path" id="path" value="${product.path }"/>
		        </c:if>
		        
		    </div>
		  </div>
		  
			  
		  </c:if>
		 
		  <div class="form-group">
		    <div class="col-sm-offset-5 col-sm-7">
		      <input type="button" class="btn btn-default" onclick="checkPath()" value="提交">
		    </div>
		  </div>
      </form>
    
  </div>
  
</div>

</body>
</html>
